<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
    
    <div class="box">

        <p class="p">11</p>
        <h3 class="h">22</h3>
        <button class="b">33</button>

    </div>


    <script>

        var oBox = document.querySelector('.box') ;

        oBox.onclick = function(e) {
            var ev = e || event ;
            // console.log(ev.target);
            // console.log(this);


            // 低版本IE使用srcElement
            var target = ev.target || ev.srcElement ;

            if(ev.target.className === 'p') {
                alert('你点了p标签')
            }
            else if(ev.target.className === 'h') {
                alert('点击了h3')
            }
        }

    </script>




</body>
</html>